<script type="text/javascript" language="javascript" charset="utf-8">
$(".header-con li a").removeClass("open-menu");
$(".header-con li #statistical_datum").addClass("open-menu");
</script>
<div class="boxed clearfix">
  <div class="common-tit">
    <h2>财务数据</h2>
    <span>数据统计 > 财务数据</span>
  </div>
  <div class="global-data">
    <div class="xdata-box">
      <h3>总计</h3>
      <ul>
        <li>
          <span><%= @finance_total_info.income_datas.inject(0){|i,j| i+j }.round(2)%></span>
          <em>收入(元)</em>
        </li>
        <li>
          <span><%= @finance_total_info.expenditure_datas.inject(0){|i,j| i+j }.round(2)%></span>
          <em>支出(元)</em>
        </li>
        <li>
          <span><%= @finance_total_info.class_fire_datas.inject(0){|i,j| i+j }.round(2)%></span>
          <em>课消(元)</em>
        </li>
      </ul>
      <div id="finaData"></div>
    </div>
    <div class="pdata-box clearfix">
      <div id="incomeData"></div>
      <div id="expendiData"></div>
    </div>
  </div>
</div>
<script src="/assets/js/echarts.common.min.js"></script>
<script src="/assets/js/common-list.js"></script>
<script>
// 财务
var myChart = echarts.init(document.getElementById('finaData'));
var xAxisData = <%== @finance_total_info.dates.to_json %>;
var data1 = <%== @finance_total_info.income_datas.to_json %>;
var data2 = <%== @finance_total_info.expenditure_datas.to_json %>;
var data3 = <%== @finance_total_info.class_fire_datas.to_json %>;
// for (var i = 0; i < 30; i++) {
//   if (i < 10) {
//     xAxisData.push('2016-10-0' + (i + 1));
//   } else {
//     xAxisData.push('2016-10-' + (i + 1));
//   }
//   data1.push(Math.abs((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5));
//   data2.push(Math.abs((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5));
//   data3.push(Math.abs((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5));
// }

option = {
  legend: {
    data: ['收入(元)', '支出(元)', '课消(元)'],
    align: 'left'
  },
  toolbox: {
    // y: 'bottom',
    feature: {
      magicType: {
        type: ['stack', 'tiled']
      },
      dataView: {},
      saveAsImage: {
        pixelRatio: 2
      }
    }
  },
  tooltip: {},
  xAxis: {
    data: xAxisData,
    silent: false,
    splitLine: {
      show: false
    }
  },
  yAxis: {
  },
  toolbox: {
    show : true,
  },
  dataZoom: [{
    startValue: '2016-10-09'
  }, {
    type: 'inside'
  }],
    series: [{
      name: '收入(元)',
      type: 'bar',
      data: data1,
      animationDelay: function (idx) {
        return idx * 10;
      }
    }, {
      name: '支出(元)',
      type: 'bar',
      data: data2,
      animationDelay: function (idx) {
        return idx * 10;
      }
    }, {
      name: '课消(元)',
      type: 'bar',
      data: data3,
      animationDelay: function (idx) {
        return idx * 10;
      }
    }],
      animationEasing: 'elasticOut',
      animationDelayUpdate: function (idx) {
        return idx * 5;
      }
};
myChart.setOption(option);
// 收入类型比
var myChart1 = echarts.init(document.getElementById('incomeData'));
option1 = {
  title : {
    text: '收入类型比',
    x:'14%'
  },
  color : ['#3cf','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
  tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    x : 'center',
    y : 'bottom',
    data: <%==  @income_type_scale.keys.to_json%>
  },
  toolbox: {
    show : true,
    feature : {
      mark : {show: true},
      // dataView : {show: true, readOnly: false},
      magicType : {
        show: true,
        type: ['pie', 'funnel']
      },
      // restore : {show: true},
      saveAsImage : {show: true}
    }
  },
  calculable : true,
  series : [
  {
    name:'半径模式',
    type:'pie',
    radius : [20, 140],
    center : ['50%', '50%'],
    roseType : 'radius',
    lableLine: {
      normal: {
        show: false
      },
      emphasis: {
        show: true
      }
    },
    data: <%==  @income_type_scale.values.to_json%>
  }
  ]
};
myChart1.setOption(option1);



//支出类型比 @expenditure_type_scale
var myChart2 = echarts.init(document.getElementById('expendiData'));
option2 = {
  title : {
    text: '支出类型比',
    x:'14%'
  },
  color : ['#3cf', '#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
  tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    x : 'center',
    y : 'bottom',
    data: <%==  @expenditure_type_scale.keys.to_json%>
  },
  toolbox: {
    show : true,
    feature : {
      mark : {show: true},
      // dataView : {show: true, readOnly: false},
      magicType : {
        show: true,
        type: ['pie', 'funnel']
      },
      // restore : {show: true},
      saveAsImage : {show: true}
    }
  },
  calculable : true,
  series : [
  {
    name:'半径模式',
    type:'pie',
    radius : [20, 140],
    center : ['50%', '50%'],
    roseType : 'radius',
    lableLine: {
      normal: {
        show: false
      },
      emphasis: {
        show: true
      }
    },
    data: <%==  @expenditure_type_scale.values.to_json%>
  }
  ]
};
myChart2.setOption(option2);
</script>
